<template>
  <div>
    <div>
      <el-input placeholder="请输入内容" v-model="queryModel.query" class="qq">
        <el-button
          :loading="queryLoaing"
          slot="append"
          icon="el-icon-search"
          @click="
            queryModel.pagenum = 1;
            getUserList();
          "
        ></el-button>
      </el-input>

      <el-button
        type="primary"
        @click="
          model = {};
          visible = true;
        "
        >添加用户</el-button
      >
    </div>
    <div>
      <MyTable
        :loading="tableLoading"
        :list="list"
        :cols="cols"
        :total="total"
        v-model="queryModel"
        @change="getUserList"
      >
        <template v-slot:state="{ row }">
          <el-switch
            @change="switchState(row)"
            v-model="row.mg_state"
          ></el-switch>
        </template>
        <template v-slot:action="{ row }">
          <el-button
            @click="
              model = { ...row };
              visible = true;
            "
          >
            编辑</el-button
          >
          <el-button @click="deleteUser(row)">删除</el-button>
          <el-button
            @click="
              model = { ...row };
              assignVisible = true;
              getRoleList();
            "
            >分配角色</el-button
          >
        </template>
      </MyTable>
      <!-- <el-table rou-key="id" :data="list" border style="width: 100%">
        <el-table-column type="index" label="#" width="100px">
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="200px">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="200px">
        </el-table-column>
        <el-table-column prop="mobile" label="电话" width="200px">
        </el-table-column>
        <el-table-column prop="role_name" label="角色" width="200">
        </el-table-column>
        <el-table-column label="状态" width="200">
          <template v-slot="{ row }">
            <el-switch
              @change="switchState(row)"
              v-model="row.mg_state"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              @click="
                model = { ...row };
                visible = true;
              "
            >
              编辑</el-button
            >
            <el-button @click="deleteUser(row)">删除</el-button>
            <el-button
              @click="
                model = { ...row };
                assignVisible = true;
                getRoleList();
              "
              >分配角色</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="
          (v) => {
            queryModel.pagesize = v;
            getUserList();
          }
        "
        @current-change="
          (v) => {
            queryModel.pagenum = v;
            getUserList();
          }
        "
        :current-page="queryModel.pagenum"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="queryModel.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination> -->
    </div>

    <!-- 添加修改 -->
    <!-- <MyDialog :title="title + '用户'" ref="d" @confirm="confirm">
        <el-form ref="form" label-width="70px" :model="model" :rules="rules">
          <el-form-item label="用户名" prop="username">
            <el-input
              :disabled="!!model.id"
              :maxlength="10"
              v-model="model.username"
            >
            </el-input>
          </el-form-item>
          <el-form-item v-if="!model.id" label="密码" prop="password">
            <el-input :maxlength="16" v-model="model.password"> </el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input :maxlength="30" v-model="model.email"> </el-input>
          </el-form-item>
          <el-form-item label="手机" prop="mobile">
            <el-input :maxlength="11" v-model="model.mobile"> </el-input>
          </el-form-item>
        </el-form>
      </MyDialog> -->

    <el-dialog
      :close-on-click-model="false"
      :title="title + '用户'"
      :visible.sync="visible"
    >
      <el-form ref="form" label-width="70px" :model="model" :rules="rules">
        <el-form-item label="用户名" prop="username">
          <el-input
            :disabled="!!model.id"
            :maxlength="10"
            v-model="model.username"
          >
          </el-input>
        </el-form-item>
        <el-form-item v-if="!model.id" label="密码" prop="password">
          <el-input :maxlength="16" v-model="model.password"> </el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input :maxlength="30" v-model="model.email"> </el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input :maxlength="11" v-model="model.mobile"> </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button @click="confirm" :logding="confirmLoading">确认</el-button>
      </div>
    </el-dialog>
    <!-- <MyConfirm title="测试标题" message="11"></MyConfirm> -->

    <MyDialog title="分配角色" ref="ad" @confirm="changeRole">
      <p>当前的用户：{{ model.username }}</p>
      <p>当前的角色：{{ model.role_name }}</p>
      <p>
        分配新角色:<el-select v-model="model.rid">
          <el-option
            v-for="item in roles"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </p>
    </MyDialog>
    <!-- <el-dialog
        :close-on-click-model="false"
        title="分配角色"
        :visible.sync="assignVisible"
      >
        <p>当前的用户：{{ model.username }}</p>
        <p>当前的角色：{{ model.role_name }}</p>
        <p>
          分配新角色:<el-select v-model="model.rid">
            <el-option
              v-for="item in roles"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </p>
        <div slot="footer">
          <el-button @click="assignVisible = false">取消</el-button>
          <el-button :logding="confirmLoading" @click="changeRole"
            >确认</el-button
          >
        </div>
      </el-dialog> -->

    <br />
    <!-- <el-button @click="$router.back()">返回</el-button> -->
  </div>
</template>
<script>
import { getUsers, changeState, addUser, updateUser, delUser } from "api/user";
import { getRoles, updateRole } from "api/rights";
export default {
  name: "users",
  data() {
    return {
      model: {},
      rules: {
        username: [
          { required: true, message: "用户名不能为空" },
          { min: 3, max: 10, message: "用户名长度为3-10位" },
        ],
        password: [
          { required: true, message: "密码不能为空" },
          { min: 6, max: 15, message: "密码长度为6-15位" },
        ],
        email: [
          { required: true, message: "邮箱不能为空" },
          { type: "email", message: "邮箱格式不正确" },
        ],
        mobile: [
          { required: true, message: "手机不能为空" },
          { pattern: /^1[3-9]\d{9}$/, message: "手机格式不正确" },
        ],
      },
      queryModel: {
        query: "",
        pagenum: 1,
        pagesize: 4,
      },
      roles: [], // juese
      list: [], // 用户列表数据
      total: 0,
      queryLoaing: false,
      visible: false,
      confirmLoading: false,
      /**
       * 分配角色模态框是否显示
       */
      assignVisible: false,
      /**
       * 表格loading
       */
      tableLoading: false,
      /**
       * 列
       */
      cols: [
        {
          title: "#",
          type: "index",
        },
        {
          title: "姓名",
          name: "username",
        },
        {
          title: "邮箱",
          name: "email",
        },
        {
          title: "电话",
          name: "mobile",
        },
        {
          title: "角色",
          name: "role_name",
          width: "100px",
        },
        {
          title: "状态",
          slot: "state",
          width: "100px",
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
        },
      ],
    };
  },

  methods: {
    /**
     * 修改角色
     */
    async changeRole() {
      const ad = this.$refs.ad;
      try {
        ad.start();
        // this.confirmLoading = true;
        await updateRole(this.model.id, this.model.rid);
        this.$m.success("角色修改成功");
        ad.hide();
        // this.assignVisible = false;
        this.getUserList();
      } catch (error) {}
      ad.stop();
      // this.confirmLoading = false;
    },

    /**
     * 获取角色列表
     */
    async getRoleList() {
      try {
        this.tableLoading = true;
        this.roles = await getRoles();
        const rid =
          this.roles.find((c) => c.roleName === this.model.role_name)?.id ??
          this.roles[0].id;
        this.$set(this.model, "rid", rid);
        this.$refs.ad.show();
        this.tableLoading = false;
      } catch (error) {}
      this.tableLoading = false;
    },

    async deleteUser({ id, username }) {
      let res;
      try {
        console.log(1);
        console.log(22);
        res = await this.$myConfirm(`你确定要删除【${username}】`);
        await delUser(id);
        this.$m.success("成功");
        this.getUserList();
      } catch (error) {}
      res && res();
    },

    /**
     * 提交添加修改
     *  */
    async confirm() {
      // const d = this.$refs.d;
      try {
        await this.$refs.form.validate();
        // d.stary();
        await (this.model.id ? updateUser : addUser)(this.model);
        this.confirmLoading = true;
        // d.hide();
        this.$m.success(this.title + "成功");
        this.visible = false;
        this.getUserList();
      } catch (error) {}
      this.confirmLoading = false;
      // d.stop();
    },

    async switchState({ id, mg_state }) {
      try {
        await changeState(id, mg_state);
        this.$m.success("状态更变成功");
        this.getUserList();
      } catch (error) {}
    },

    /**
     *获取用户列表
     */
    async getUserList() {
      try {
        this.queryLoaing = true;
        const { total, users } = await getUsers(this.queryModel);
        this.total = total;
        this.list = users;
      } catch (error) {}
      this.queryLoaing = false;
    },
  },
  created() {
    this.getUserList();
  },
  computed: {
    title() {
      return this.model.id ? "修改" : "添加";
    },
  },
};
</script>
<style lang="scss">
.q {
  width: 500px !important;
}
.q1 {
  margin-left: 30px !important;
}
</style>
<style lang="scss">
.qq {
  width: 300px !important;
}
</style>